<template>
  <div>
    <div v-if="showLogin">
      <LoginWindow @changeShow="getModel(arguments)"></LoginWindow>
    </div>
    <div class="show">
      <div class="button">
        <div class="btn right" @click="recall">撤销</div>
        <div class="btn left" @click="reset">清零</div>
      </div>
      <div class="mark-text">当前分数</div>
      <div class="mark">{{ mark }}</div>
    </div>
    <div class="row">
      <div class="button right" @click="addMark(1)">+1</div>
      <div class="button left" @click="addMark(-1)">-1</div>
    </div>
    <div class="row">
      <div class="button right" @click="addMark(3)">+3</div>
      <div class="button left" @click="addMark(-3)">-3</div>
    </div>
  </div>
</template>

<script>
import LoginWindow from "@/components/LoginWindow";
import { showSuccess, showModal, post, get } from "@/util";

export default {
  data() {
    return {
      mark: 0,
      userinfo: {},
      showLogin: false
    };
  },
  components: {
    LoginWindow
  },
  methods: {
    // addMark (add) {
    //   this.mark += add
    // },
    async addMark(add) {
      try {
        const data = {
          openid: this.userinfo.openId,
          add: add
        };
        const res = await post("/weapp/createrecord", data);
        console.log("从后端返回的执行正确的信息是：", res);
        this.mark += add;
      } catch (err) {
        showModal("失败", "请重试");
        console.log("从后端返回的执行错误的信息是：", err);
      }
    },
    getModel(val) {
      this.showLogin = val[0];
      this.userinfo = val[1];

      this.getCurrentMark();
    },
    async getCurrentMark() {
      try {
        const res = await get("/weapp/getmark", {
          openid: this.userinfo.openId
        });
        console.log("从后端返回的执行正确的信息是：", res);
        this.mark = res.mark;
      } catch (err) {
        showModal("失败", "页面加载失败，请下拉页面重试");
        console.log("从后端返回的执行错误的信息是：", err);
      }
    },
    async resetMark() {
      if (this.mark !== 0) {
        try {
          const res = await post("/weapp/resetmark", {
            openid: this.userinfo.openId
          });
          console.log("从后端返回的执行正确的信息是：", res);
          this.mark = 0;
          showSuccess("清零成功")
        } catch (err) {
          showModal("失败", "请重试");
          console.log("从后端返回的执行错误的信息是：", err);
        }
      }
    },
    reset() {
      var that = this;
      wx.showModal({
        content: "确定要清零吗？",
        success: function(res) {
          if (res.confirm) that.resetMark();
        }
      });
    },
    async recall() {
      try {
        const res = await post("/weapp/deleterecord", {
          openid: this.userinfo.openId
        });
        console.log("从后端返回的正确信息是:", res);
        var add = res.add;
        this.mark -= add;
        showSuccess("撤销成功");
      } catch (err) {
        showModal("失败", err.data.msg);
        console.log("从后端返回的执行正确的信息:", res);
      }
    }
  },
  onShow() {
    // 子组件LoginWindow.vue中LoginSuccess函数将登录成功的信息res以名字userinfo储存到缓存中
    const userinfo = wx.getStorageSync("userinfo");
    if (userinfo.openId) {
      this.userinfo = userinfo;
      this.getCurrentMark();
    } else {
      wx.hideTabBar();
      this.showLogin = true;
    }
  },
  onPullDownRefresh() {
    this.getCurrentMark();
    wx.stopPullDownRefresh();
  },
  onShareAppMessage() {
    return {
      title: {
        title: "为习惯赋分",
        path: "/pages/index/main",
        imgUrl: ""
      }
    };
  }
};
</script>

<style lang="scss" scoped>
.show {
  text-align: center;
  height: 275px;
  background: #a6a6d2;
  margin-bottom: 5px;
  color: #fff;
  font-weight: bold;
  .mark-text {
    font-size: 30px;
    padding: 28px;
  }
  .mark {
    font-size: 120px;
  }
  .button {
    margin: 0 10px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    // background:#EA5149;
    .btn {
      width: 60px;
      border-radius: 15px;
      border: 1px dashed #feb600;
    }
  }
}

.row {
  margin: 40px 56px;
  .button {
    width: 70px;
    height: 70px;
    line-height: 70px;
    border-radius: 20%;
    border: none;
    text-align: center;
    font-size: 30px;
    color: #fff;
    font-weight: bold;
  }
}

.right {
  background: #ea5149;
  float: right;
}
.left {
  background: #feb600;
  margin-right: 80px;
}
</style>
